<template>
  <div class="invoice_box">
    <el-tabs v-model='activeName' @tab-click='handleClick'>
      <!-- 未开发票订单 -->
      
      <el-tab-pane label='未开发票订单' name='not'>
         <div class="invoiceTable" v-if="!invoiceFormBox && !invoiceOk">
          <el-table ref="multipleTable" height="500" :data="noInvoiceObj.list" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange"  header-align="center">
            <el-table-column type="selection"  width="55" align="center" ></el-table-column>
            <el-table-column label="订单编号" width="120" align="center" >
              <template slot-scope="scope">{{ scope.row.orderNum }}</template>
            </el-table-column>
            <el-table-column label="订单时间" width="120" align="center" >
              <template slot-scope="scope">{{ scope.row.orderTime }}</template>
            </el-table-column>
            <el-table-column label="订单状态"  width="120" align="center">
              <template slot-scope="scope">{{ orderStatus[scope.row.orderStatus] }}</template>
            </el-table-column>
            <el-table-column prop="des" label="订单描述" align="center">
            </el-table-column>
            <el-table-column label="是否含税支付"  align="center">
              <template slot-scope="scope">
                {{ scope.row.hastax === true ? "是":"否" }}
                <p class="taxMoney" v-if="scope.row.hastax === false">(税:{{scope.row.taxMoney}}元)</p>
              </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center">
              <template slot-scope="scope">{{ payType[scope.row.payType] }}</template>
            </el-table-column>
            <el-table-column label="订单金额" align="center">
              <template slot-scope="scope">{{ scope.row.payMoney }}</template>
            </el-table-column>
          </el-table>
          <div class="table_bottom clearfix">
            <span style="padding-right:10px">
              共计{{invoiceLen}}条记录，已选择{{selectLen}}条
            </span>
            <span>{{noTaxlen}}条需支付税费共<i class="taxMoney">{{paytaxmoney | floatPrices}}</i>元</span>
            <el-button type="warning" style="width:120px" class="fr" :orderIds="selectIds" @click="nextInvoice"> 下一步</el-button>
             <span class="taxPrice">发票合计金额：<i class="price">{{paytaxmoney | floatPrices}}</i></span>
          </div>
        </div>
        <!-- 发票订单 -->
        <invoice-form v-if="invoiceFormBox && !invoiceOk" @invoice-ok="openInvoiceOK" @invoice-cancel="backPage"></invoice-form>
        <!-- 发票请求成功 -->
        <div class="invoiceOk" v-if="invoiceOk">
          <em class="el-icon-circle-check ok_icon"></em>
          <p class="text">发票申请成功，后台将在核对信息完成后开票。发票将寄送到您填写的地址。如有其它问题，您可拨打0571-88888888联系客服。</p>
          <div class="btns">
            <el-button  plain @click="backPage">返回订单管理</el-button>
            <el-button type="primary">选择商品</el-button>
          </div>
        </div>
      </el-tab-pane>
      <!-- 已开发票订单 -->
      <el-tab-pane label='已开发票订单' name='already'>
        <el-table ref="multipleTable" height="500" :data="alreadyInvoiceObj.list" tooltip-effect="dark" style="width: 100%"  header-align="center">
        <el-table-column label="订单编号" width="120" align="center" >
          <template slot-scope="scope">{{ scope.row.orderNum }}</template>
        </el-table-column>
        <el-table-column label="订单时间" width="120" align="center" >
          <template slot-scope="scope">{{ scope.row.orderTime }}</template>
        </el-table-column>
        <el-table-column label="订单状态"  width="110" align="center">
          <template slot-scope="scope">{{ orderStatus[scope.row.orderStatus] }}</template>
        </el-table-column>
        <el-table-column prop="des" label="订单描述" align="center">
        </el-table-column>
        <el-table-column label="订单金额" align="center">
          <template slot-scope="scope">{{ scope.row.payMoney }}</template>
        </el-table-column>
        <el-table-column label="发票状态" align="center" >
          <template slot-scope="scope">{{invoiceStatus[scope.row.openInvoiceStatus]}}</template>
        </el-table-column>
        <el-table-column label="开票时间" align="center" >
          <template slot-scope="scope">{{ scope.row.invoiceTime }}</template>
        </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {Tabs, TabPane, Button, TableColumn, Table} from 'element-ui'
  import {noInvoiceList, invoiceAlready} from '@/service/get-data'
  import {invoiceForm} from '@/components/index'
  import {orderStatus, payType, invoiceStatus} from '@/tool/index'
  export default {
    components: {
      invoiceForm,
      elTabs: Tabs,
      elTabPane: TabPane,
      elButton: Button,
      elTableColumn: TableColumn,
      elTable: Table
    },
    data () {
      return {
        activeName: 'not',
        noInvoiceObj: {
          page: {},
          list: []
        }, // 未开发票的列表
        alreadyInvoiceObj: {
          page: {},
          list: []
        }, // 已经开发票的列表
        multipleSelection: [], // 选中的list
        selectIds: '', // 要开发票订单的ids "1,2,3"
        invoiceFormBox: false, // 是否显示 申请发票的表单
        invoiceOk: false, // 是否显示 成功开发票
        noTaxlen: 0, // 选中不含税的条数
        paytaxmoney: 0 // 需要支持的金额
      }
    },
    methods: {
      handleClick (tab, event) {
      },
      // 未开发的订单
      async fetchNoInvoice (userId) {
        let res = await noInvoiceList(userId)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.noInvoiceObj.list = res.data.list
          this.noInvoiceObj.page = res.data.page
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'warning'
          })
        }
      },
      //  已经开发票的订单
      async fetchAlInvoice (userId) {
        let res = await invoiceAlready(userId)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.alreadyInvoiceObj.list = res.data.list
          this.alreadyInvoiceObj.page = res.data.page
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'warning'
          })
        }
      },
      handleSelectionChange (val) {
        console.log(val)
        this.multipleSelection = val
      },
      nextInvoice () {
        if (this.selectLen > 0) {
          this.invoiceFormBox = true
        } else {
          this.$message({
            message: '您还未选择一条订单'
          })
        }
      },
      // 提交开具发票
      openInvoiceOK (result) {
        alert(result)
        this.invoiceOk = result
      },
      // 返回未开发票页
      backPage (value) {
        this.invoiceFormBox = false
        this.invoiceOk = false
      }
    },
    mounted () {
      this.fetchNoInvoice()
      this.fetchAlInvoice()
    },
    computed: {
      selectLen () {
        return this.multipleSelection.length
      },
      invoiceLen () {
        return this.noInvoiceObj.list.length
      },
      hasInvoice () {
        return this.activeName === 'not'
      },
      orderStatus () {
        return orderStatus
      },
      payType () {
        return payType
      },
      invoiceStatus () {
        return invoiceStatus
      }
    },
    watch: {
      multipleSelection (newVal) {
        let _arr = []
        let taxlen = 0
        let taxmoney = 0
        newVal.map((item, index) => {
          _arr.push(item.id)
          if (!item.hastax) {
            taxlen++
            taxmoney += parseInt(item.taxMoney)
          }
        })
        this.paytaxmoney = taxmoney
        this.noTaxlen = taxlen
        let _str = _arr.toString()
        _str = _str.substring(1, _str.length - 1)
        this.selectIds = _str
      }
    }
  }
</script>

<style lang="scss" scoped>

  .table_bottom{
    display: inline-block;
    width: 100%;
    padding-top: 10px;
    line-height: 40px;
    font-size: 14px;
  }
  .taxMoney{
    color: #FFCC00;
  }
  .invoiceOk{
    position: relative;
    text-align: center;
    padding: 80px 100px;
    .text{
      font-size: 18px;
      color: #555555;
      line-height: 36px;
    }
    .btns{
      margin-top: 20px;
    }
    .ok_icon{
      color:#4098FE;
      font-size:60px;
    }
  }
  .taxPrice{
    float: right;
    padding-right: 10px;
    .price{
      font-size: 18px;
      color: #FFCC00;
    }
  }
</style>
